import { reactive, ref } from 'vue'
import { notification } from 'ant-design-vue';

export interface StoreState {
    code: string,
    suffix: string,
    active: boolean,
    save: boolean,
    hidden: boolean,
    unSaveCode: string,
}

export class CodeEditorStore {
    state: Record<string, StoreState>
    Active: string = ''
    FileChangeEvent: Function = function () { }
    PageRunderEvent: Function = function () { }
    constructor() {
        this.state = reactive({});
        this.state['main.js'] = {
            unSaveCode: ``,
            code: `// 框架模板，请勿修改
import { createApp, h } from 'vue'
import App from './App.vue'
import zh from "dayjs/locale/zh-cn"
import dayjs from 'dayjs'
import zh_CN from 'ant-design-vue/es/locale/zh_CN';
import { createPinia } from 'pinia';
import antd from 'ant-design-vue'
dayjs.locale(zh);
const app = createApp({
    render() {
        return h('a-config-provider', { '.locale': this.zh_CN }, [
            h(App)
        ])
    },
    data() {
        return { zh_CN: zh_CN }
    }
});
const pinia = createPinia()
app.use(pinia)
app.use(antd);
app.mount('#app')`.trim(),
            suffix: 'js',
            active: false,
            save: true,
            hidden: true,
        };
        this.state['App.vue'] = {
            unSaveCode: ``,
            code: `<script setup>
import { ref } from 'vue'
const msg = ref('hello world')
</script>
<template>
    <div>{{msg}}</div>
</template>`.trim(),
            suffix: 'vue',
            active: false,
            save: true,
            hidden: false,
        }
    }
    init() {
        for (const key in this.state) {
            const element = this.state[key];
            if (!element.hidden) {
                this.SetActive(key);
                break;
            };
        };
        this.PageRunderEvent && this.PageRunderEvent();
    }
    onPageRunder(Event: Function) {
        this.PageRunderEvent = Event;
    }
    onChangeFile(Event: Function) {
        this.FileChangeEvent = Event;
    }
    SetActive(FileName: string) {
        this.Active && (this.state[this.Active].active = false);
        this.state[FileName].active = true;
        this.Active = FileName;
        this.FileChangeEvent(this.state[FileName], FileName);
    }
    deleteFile(FileName: string) {
        var FileList = Object.keys(this.state);
        var ActiveFile = null;
        for (let i = 0; i < FileList.length; i++) {
            const element = FileList[i];
            if (element != FileName && !this.state[element].hidden) {
                ActiveFile = element;
                break;
            }
        };
        ActiveFile && this.SetActive(ActiveFile);
        delete this.state[FileName];
    }
    AddFile(FileName: string, Code: string, hidden: boolean) {
        var suffix = FileName.match(/[^.]+$/);
        this.state[FileName] = {
            unSaveCode: ``,
            code: Code.trim(),
            suffix: suffix![0],
            active: false,
            save: true,
            hidden: hidden,
        }
        this.SetActive(FileName);
    }
    SendUnSaveFile(FileName: string, Code: string) {
        this.state[FileName].unSaveCode = Code.trim();
        this.state[FileName].save = this.state[FileName].unSaveCode == this.state[FileName].code;
    }
    SaveFile(FileName: string) {
        if (this.state[FileName]) {
            this.state[FileName].code = this.state[FileName].unSaveCode;
            this.state[FileName].save = true;
            let AllSave = true;
            for (const key in this.state) {
                const element = this.state[key];
                if (!element.save) {
                    AllSave = false;
                    break;
                }
            };
            if (AllSave) {
                this.RunderPage();
            };
        } else {
            console.error('文件存储错误：' + FileName);
        }
    }
    RunderPage() {
        var isAllSave = true;

        for (const key in this.state) {
            const element = this.state[key];
            if (!element.save) {
                notification.warning({
                    message: '有文件尚未保存',
                    placement: 'topLeft'
                });
                isAllSave = false;
                break;
            };
        };
        if (isAllSave) {
            this.PageRunderEvent && this.PageRunderEvent();
        };
    }
    destroy() {
        for (const key in this.state) {
            delete this.state[key];
        };

        this.state['main.js'] = {
            unSaveCode: ``,
            code: `// 框架模板，请勿修改
import { createApp, h } from 'vue'
import App from './App.vue'
import zh from "dayjs/locale/zh-cn"
import dayjs from 'dayjs'
import zh_CN from 'ant-design-vue/es/locale/zh_CN';
import { createPinia } from 'pinia';
import antd from 'ant-design-vue'
dayjs.locale(zh);
const app = createApp({
    render() {
        return h('a-config-provider', { '.locale': this.zh_CN }, [
            h(App)
        ])
    },
    data() {
        return { zh_CN: zh_CN }
    }
});
const pinia = createPinia()
app.use(pinia)
app.use(antd);
app.mount('#app')`.trim(),
            suffix: 'js',
            active: false,
            save: true,
            hidden: true,
        };
        this.state['App.vue'] = {
            unSaveCode: ``,
            code: `<script setup>
import { ref } from 'vue'
const msg = ref('hello world')
</script>
<template>
    <div>{{msg}}</div>
</template>`.trim(),
            suffix: 'vue',
            active: false,
            save: true,
            hidden: false,
        }
        this.Active = ''
    }
}

const CodeEditor: CodeEditorStore = new CodeEditorStore();

export { CodeEditor }